<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="top">
          <view class="title">请选择申请原因</view>
        </view>
        <view class="reason">
          <view
            class="row"
            v-for="(item, index) of $data.list"
            :key="index"
            @tap="onCheck(item, index)"
          >
            <view class="row_left">{{ item.tip }}</view>
            <view class="row_right">
              <view
                class="row_right_box"
                :class="[{ 'row_right_box--active': item._check }]"
              >
                <view v-if="item._check" class="row_right_box--check"></view>
              </view>
            </view>
          </view>
        </view>
        <view class="confirm">
          <view class="common_btn confirm_btn" @tap="onConfirm">确定</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref, nextTick, computed, onMounted, watch } from "vue";
import { useGetConfig } from "../../../../hooks/useCommon";
import { configKeyEnum } from "../../../../enums/common";
import BasicConfig from "../../../../utils/config";
const $emit = defineEmits(["update:show", "close", "confirm"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const $data = reactive({
  list: [],
});
const init = () => {
  useGetConfig({ key: configKeyEnum["订单售后原因"] }).then((res) => {
    $data.list = res;
    $data.list.map((m) => (m._check = false));
  });
};
const onCheck = (item, index) => {
  $data.list.map((m, i) => (m._check = i === index));
};
const close = () => {
  $emit("update:show", false);
};
const open = () => {};
const onConfirm = () => {
  const opt = $data.list.find((l) => l._check);
  if (!opt) {
    BasicConfig.toast("请选择申请原因");
    return;
  }
  $emit("confirm", opt.value);
  close();
};
onMounted(() => {
  init();
});
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx 30rpx 0 0 !important;
    max-height: 80vh;
  }
  ::v-deep .u-popup__content__close {
    z-index: 999999;
  }
  .content {
    background: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    height: 80vh;
    padding-bottom: 200rpx;
    overflow-y: auto;
    .top {
      background: #ffffff;
      position: sticky;
      top: 0;
      z-index: 9999;
    }
    .title {
      background: #ffffff;
      padding: 30rpx;
      font-size: 36rpx;
      border-bottom: 1px solid #f0f0f0;
    }
    .row {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }
      &_left {
        width: calc(100% - 120rpx);
      }
      &_right {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: unset !important;
        &_box {
          width: 50%;
          height: 50%;
          border: 1px solid #cccccc;
          background: #cccccc;
          position: relative;
          border-radius: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          &--check {
            width: 70%;
            height: 70%;
            border-radius: 100%;
            background-color: $main-color;
          }
        }
        &_box--active {
          background: rgba($color: #ffffff, $alpha: 0);
          border-color: $main-color;
        }
      }
    }

    .confirm {
      width: 100%;
      //   margin: 30rpx 0;
      padding: 30rpx;
      background: #ffffff;
      z-index: 9999;
      position: fixed;
      bottom: 0rpx;
      &_btn {
        width: 100%;
      }
    }
  }
}
</style>
